<template>
  <div class="floor-list">
    <div class="floor-wrap" v-for="(item, index) in floorlist" :key="index">
      <img :src="item.headUrl" alt="">
      <div class="floor-content">
        <div v-for="(info, index) in item.list" :key="index" class="floor-category">
          <p>{{info.title}}</p>
          <p>{{info.desc}}</p>
          <div class="floor-products">
            <img v-for="(imginfo, index) in info.products" :key="index" :src="imginfo.imgUrl" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFloorList } from '../../api/api';
export default {
  data() {
    return {
      floorlist: []
    }
  },
  created() {
    getFloorList((res) => {
      // console.log(res.data);
      this.floorlist = res.data
    })
  }
};
</script>

<style lang="scss" scoped>
.floor-list {
  margin-bottom: 100px;

  .floor-wrap {

    img {
      width: 100%;
      height: 57px;
    }

    .floor-content {
      display: flex;
      flex-wrap: wrap;
      


      .floor-category {
        width: 50%;
        height: 194px;
        padding: 16px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;

        p:nth-child(1) {
          color: #333;
          height: 32px;
          line-height: 32px;
          font-size: 24px;
        }

        p:nth-child(2) {
          color: #f63515;
          height: 24px;
          line-height: 24px;
          font-size: 18px;
          padding: 7px 0;
        }

        .floor-products {
          display: flex;
          justify-content: space-around;

          img {
            width: 94px;
            height: 94px;
          }
        }
      }
    }
  }
}
</style>
